<template>
  <div class="container">
    <el-tree
      :data="depts"
      :expand-on-click-node="false"
      default-expand-all="true"
    >
      <template v-slot="{ data }">
        <el-row
          style="width: 100%; height: 40px"
          type="flex"
          justify="space-between"
          align="middle"
        >
          <el-col>{{ data.name }}</el-col>
          <el-col :span="4">
            <span class="tree-manager">{{ data.managerName }}</span>
            <!-- $event 实参 表示类型 -->
            <el-dropdown @command="dept($event, data.id)">
              <!-- 显示区域内容 -->
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <!-- 下拉菜单选项 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add"> 添加子部门 </el-dropdown-item>
                <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </template>
    </el-tree>
    <el-dialog :title="tt" :visible.sync="dialogFormVisible">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item
          label="部门名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="ruleForm.name" placeholder="1-2个字符" />
        </el-form-item>
        <el-form-item
          label="部门编码"
          :label-width="formLabelWidth"
          prop="code"
        >
          <el-input v-model="ruleForm.code" placeholder="1-2个字符" />
        </el-form-item>
        <el-form-item
          label="部门负责人"
          :label-width="formLabelWidth"
          prop="managerId"
        >
          <el-select
            v-model="ruleForm.managerId"
            placeholder="请选择部门负责人"
            style="width: 100%"
          >
            <el-option
              v-for="item in username"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="部门介绍"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input
            v-model="ruleForm.introduce"
            type="textarea"
            placeholder="1-100个字符"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { arrtree } from '@/utils/arr-tree'
import { getdepartment, adddepartment, username, particulars, amendpartment, delpartment } from '@/api/department'

export default {
  name: 'DeparTment',

  data() {
    const poname = (rule, value, callback) => {
      if (this.tt === '新增部门') {
        if (this.getparticulars.some((item) => item.name === value)) {
          return callback(new Error('已经重复'))
        } else {
          callback()
        }
      } else {
        if (value === '') {
          return callback(new Error('请输入'))
        } else {
          callback()
        }
      }
    }
    const pocode = (rule, value, callback) => {
      if (this.tt === '新增部门') {
        if (this.getparticulars.some((item) => item.code === value)) {
          return callback(new Error('已经重复'))
        } else {
          callback()
        }
      } else {
        if (value === '') {
          return callback(new Error('请输入'))
        } else {
          callback()
        }
      }
    }
    return {
      tt: '',
      getparticulars: '',
      dialogFormVisible: false,
      formLabelWidth: '100px',
      depts: [],
      username: [],
      ruleForm: {
        code: '',
        introduce: '',
        managerId: '',
        name: '',
        pid: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 2 个字符', trigger: 'blur' },
          { validator: poname, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入编码', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 2 个字符', trigger: 'blur' },
          { validator: pocode, trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          {
            min: 1,
            max: 100,
            message: '长度在 1 到 100 个字符',
            trigger: 'blur'
          }
        ],
        managerId: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }

        ]
      },
      defaultProps: {
        children: 'child',
        label: 'name'
      }
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    async dept(tye, id) {
      if (tye === 'add') {
        this.tt = '新增部门'
        this.dialogFormVisible = true
        this.ruleForm.pid = id
        this.username = await username()
      } else if (tye === 'edit') {
        this.tt = '编辑部门'
        this.dialogFormVisible = true
        this.ruleForm.pid = id
        this.ruleForm = await particulars(this.ruleForm.pid)
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delpartment(id)
          await this.getDepartment()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    async submitForm() {
      await this.$refs.ruleForm.validate()

      if (this.tt === '新增部门') {
        await adddepartment(this.ruleForm)
        this.$message({
          message: '已成功提交',
          type: 'success'
        })
        this.$refs.ruleForm.resetFields()
        this.dialogFormVisible = false
        await this.getDepartment()
      } else {
        console.log(this.ruleForm)
        await amendpartment(this.ruleForm)
        this.$message({
          message: '已成功修改',
          type: 'success'
        })
        this.$refs.ruleForm.resetFields()
        this.dialogFormVisible = false
        await this.getDepartment()
      }
    },
    async close() {
      this.$refs.ruleForm.resetFields()
      this.dialogFormVisible = false
      await this.getDepartment()
    },
    async getDepartment() {
      this.getparticulars = await getdepartment()

      this.depts = arrtree(this.getparticulars, 0)
      console.dir(this.depts)
    }
  }

}

</script>
<style scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
.tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px;
}
.container {
  width: 70%;
  margin-left: 252px;
  background-color: #fff;
}
</style>
